<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>metisMenu</title>

    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.metismenu/1.1.2/css/metismenu.min.css">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">metisMenu</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Vertical Menu</a></li>
        <li><a href="metisFolder.html">Folder View</a></li>
        <li><a href="hover.html">Hover Option For Desktop</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



<div class="clearfix">
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <ul id="menu">
        <li class="active">
          <a href="#">
            <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
            <span class="sidebar-nav-item">metisMenu</span>
            <span class="fa arrow"></span>
          </a>
          <ul>
            <li>
              <a href="https://github.com/onokumus/metisMenu">
                <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                Fork
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu">
                <span class="sidebar-nav-item-icon fa fa-star"></span>
                Star
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu/issues">
                <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
                Issues
              </a>
            </li>
          </ul>
        </li>
          <li>
              <a href="#">Menu 0 <span class="fa arrow"></span></a>
              <ul>
                  <li><a href="#">item 0.1</a></li>
                  <li><a href="#">item 0.2</a></li>
                  <li><a href="http://onokumus.com">onokumus</a></li>
                  <li><a href="#">item 0.4</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 1.1</a></li>
                  <li><a href="#">item 1.2</a></li>
                  <li>
                      <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                      <ul>
                          <li><a href="#">item 1.3.1</a></li>
                          <li><a href="#">item 1.3.2</a></li>
                          <li><a href="#">item 1.3.3</a></li>
                          <li><a href="#">item 1.3.4</a></li>
                      </ul>
                  </li>
                  <li><a href="#">item 1.4</a></li>
                  <li>
                      <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
                      <ul>
                          <li><a href="#">item 1.5.1</a></li>
                          <li><a href="#">item 1.5.2</a></li>
                          <li><a href="#">item 1.5.3</a></li>
                          <li><a href="#">item 1.5.4</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <a href="#">Menu 2 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 2.1</a></li>
                  <li><a href="#">item 2.2</a></li>
                  <li><a href="#">item 2.3</a></li>
                  <li><a href="#">item 2.4</a></li>
              </ul>
          </li>
      </ul>
     </nav>
  </aside>
  <section class="content">
    <div class="col-xs-12">
      <h3>Auto Collapse <small>default</small></h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right"><span class="fa fa-code"></span></span>
        </div>
        <div class="panel-body">
          <pre><code class="language-markup">&lt;script src="jquery.metisMenu.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(function () {
        $('#menu').metisMenu();
    });
&lt;/script&gt;</code></pre>

        </div>
      </div>
    </div>
  </section>
</div>
<hr>
<div class="clearfix">
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <ul id="menu2">
          <li class="active">
              <a href="#">Menu 0 <span class="fa arrow"></span></a>
              <ul>
                  <li><a href="#">item 0.1</a></li>
                  <li><a href="#">item 0.2</a></li>
                  <li><a href="http://onokumus.com">onokumus</a></li>
                  <li><a href="#">item 0.4</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 1.1</a></li>
                  <li><a href="#">item 1.2</a></li>
                  <li>
                      <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                      <ul>
                          <li><a href="#">item 1.3.1</a></li>
                          <li><a href="#">item 1.3.2</a></li>
                          <li><a href="#">item 1.3.3</a></li>
                          <li><a href="#">item 1.3.4</a></li>
                      </ul>
                  </li>
                  <li><a href="#">item 1.4</a></li>
                  <li>
                      <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
                      <ul>
                          <li><a href="#">item 1.5.1</a></li>
                          <li><a href="#">item 1.5.2</a></li>
                          <li><a href="#">item 1.5.3</a></li>
                          <li><a href="#">item 1.5.4</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <a href="#">Menu 2 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 2.1</a></li>
                  <li><a href="#">item 2.2</a></li>
                  <li><a href="#">item 2.3</a></li>
                  <li><a href="#">item 2.4</a></li>
              </ul>
          </li>
      </ul>
     </nav>
  </aside>
  <section class="content">
    <div class="col-xs-12">
      <h3>No Collapse</h3>
            <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right"><span class="fa fa-code"></span></span>
        </div>
        <div class="panel-body">
          <pre><code class="language-markup">&lt;script src="jquery.metisMenu.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(function () {
        $('#menu2').metisMenu({
          toggle: false
        });
    });
&lt;/script&gt;</code></pre>

        </div>
      </div>
    </div>
  </section>
</div>
<hr>
<div class="clearfix">
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <ul id="menu3">
          <li class="active">
              <a href="http://google.com">Menu 0 <span class="fa arrow"></span></a>
              <ul>
                  <li><a href="#">item 0.1</a></li>
                  <li><a href="#">item 0.2</a></li>
                  <li><a href="http://onokumus.com">onokumus</a></li>
                  <li><a href="#">item 0.4</a></li>
              </ul>
          </li>
          <li>
              <a href="http://github.com">Menu 1 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 1.1</a></li>
                  <li><a href="#">item 1.2</a></li>
                  <li>
                      <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                      <ul>
                          <li><a href="#">item 1.3.1</a></li>
                          <li><a href="#">item 1.3.2</a></li>
                          <li><a href="#">item 1.3.3</a></li>
                          <li><a href="#">item 1.3.4</a></li>
                      </ul>
                  </li>
                  <li><a href="#">item 1.4</a></li>
                  <li>
                      <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
                      <ul>
                          <li><a href="#">item 1.5.1</a></li>
                          <li><a href="#">item 1.5.2</a></li>
                          <li><a href="#">item 1.5.3</a></li>
                          <li><a href="#">item 1.5.4</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <a href="https://github.com/onokumus/metisMenu">Menu 2 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 2.1</a></li>
                  <li><a href="#">item 2.2</a></li>
                  <li><a href="#">item 2.3</a></li>
                  <li><a href="#">item 2.4</a></li>
              </ul>
          </li>
      </ul>
     </nav>
  </aside>
  <section class="content">
    <div class="col-xs-12">
      <h3>Double Tap To Go</h3>
            <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right"><span class="fa fa-code"></span></span>
        </div>
        <div class="panel-body">
          <pre><code class="language-markup">&lt;script src="jquery.metisMenu.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(function () {
        $('#menu3').metisMenu({
          doubleTapToGo: true
        });
    });
&lt;/script&gt;</code></pre>

        </div>
      </div>
    </div>
  </section>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script src="//cdn.jsdelivr.net/bootstrap.metismenu/1.1.2/js/metismenu.min.js"></script>

<script>
    $(function () {
        $('#menu3').metisMenu({
          doubleTapToGo: true
        });
    });
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
</body>
</html>
